<template>
   <div class="jx-big" >    
         <div class="jx-info">
            <h3 class="fl">问题反馈</h3>
            <a class="button-style fr download" href="/tes/system-problem/excel">下 载</a>
        </div>
        <div class="table">
            <el-table  :data="tableData" style="width: 100%">
                  <el-table-column  label="序号" width="80">
                    <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span> </template>
                  </el-table-column>
                  <el-table-column  label="存在问题"  prop='content' width="250"></el-table-column>
                  <el-table-column  label="使用人"  prop='userName' width="130"></el-table-column>
                  <el-table-column  label="身份"  prop='roleName' width="130"></el-table-column>
                  <el-table-column  label="时间"  prop='time' width="220"></el-table-column>
            </el-table>
        </div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pagesize"
            layout="total, prev, pager, next, jumper"
            :total="totalCount"
        ></el-pagination>
    </div>
</template>

<script>
    import NotificationNav from '@/components/NotificationNav.vue'
    export default {
        components: {
            NotificationNav
        },
        data () {
            return {
                tableData:[],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
            }
        },
        created () {
            this.init()
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/tes/system-problem?pageNum='+self.currentPage+'&pagesize='+self.pagesize).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       self.tableData = res.data.content
                       self.totalCount = res.data.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
             //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
        }
    }
</script>
<style scoped>
   .el-table>>>.cell{
     white-space: nowrap
   }
</style>

<style scoped lang="scss"> 
@import "./../../../styles/layout/color_variables";
.jx-big {
    padding-left: 50px;
    padding-top: 20px;
    .jx-info{
        overflow: hidden;
        &>h3{
            height: 32px;
            line-height: 32px;
            font-size: $fs18
        }
        .download{
            margin-right: 40px;
        }
    }
    .table{
        margin: 20px 0;
        overflow: hidden;
    }
}
</style>